<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .list {
        width: 150px;
      }
      .list-item {
        float: left;
        width: 120px;
        padding: 6px 10px;
        margin: 10px;
        border: 1px solid #000;
        text-align: center;
        border-radius: 20px;
        background-color: greenyellow;
      }
    </style>
  </head>
  <body>
    <!-- 
        FLIP动画 : 针对元素结构改变的动画 
        First: 记录要监控的元素位置
        Last: 记录要元素结构变换后的位置
        Invert: 移动元素到first位置
        Play: 使用动画还原元素到本来的位置
    -->
    <button>改变第一个元素的位置</button>
    <ul class="list">
      <div class="list-item" style="background: #e75723; border-color: #a12d02">
        HTML+CSS
      </div>
      <div class="list-item">JavaScript</div>
      <div class="list-item">网络</div>
      <div class="list-item">工程化</div>
      <div class="list-item">框架</div>
      <div class="list-item">移动端</div>
      <div class="list-item">Node JS</div>
    </ul>
    <script>
      const btn = document.querySelector("button");
      const list = document.querySelector(".list");
      const firstItem = document.querySelector(".list-item:first-child");
      const lastItem = document.querySelector(".list-item:last-child");

      function getLocation() {
        const rect = firstItem.getBoundingClientRect();
        return rect.top;
      }
      //   获取第一个元素的起始位置
      const start = getLocation();
      console.log("First:", start, btn);

      btn.onclick = () => {
        list.insertBefore(firstItem, null);
        const end = getLocation();
        console.log("Last:", end);
        // delay(2000);

        const dis = start - end;
        firstItem.style.transform = `translateY(${dis}px)`;

        raf(() => {
          firstItem.style.transition = "transform 1s";
          firstItem.style.removeProperty("transform");
          console.log("play");
        });
      };

      function raf(callback) {
        requestAnimationFrame(() => {
          requestAnimationFrame(callback);
        });
      }

      function delay(duration = 1000) {
        const start = Date.now();
        while (Date.now() - start < duration) {}
      }
    </script>
  </body>
</html>
